七大跨域解决方法原理 |
您所在的位置：网站首页 › chrome cors跨域 › 七大跨域解决方法原理 |
七大跨域解决方法原理
|
前言
咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？ 为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略 如果有一个 不相同，就会出现跨域问题，不符合同源策略导致的后果有 1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问 2、DOM节点无法跨域操作 3、Ajax请求无法跨域请求 注意点：一个IP是可以注册多个不同域名的，也就是多个域名可能指向同一个IP，即使是这样，他们也不符合同源策略跨域发生在什么时候呢？ 1、请求一发出就被浏览器的跨域报错拦了下来（大多数回答） 2、请求发出去到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦下来 那到底是那种呢？我们可以验证下，咱们先npm i nodemon -g,然后创建一个index.js,然后nodemon index起一个node服务 //index.js http://127.0.0.1:8000 const http = require('http'); const port = 8000; http.createServer(function (req, res) { const { query } = urllib.parse(req.url, true); console.log(query.name) console.log('到后端喽') res.end(JSON.stringify('刘德华')); }).listen(port, function () { console.log('server is listening on port ' + port); }) 复制代码再创建一个index.html,用来写前端的请求代码，咱们就写一个简单的AJAX请求 // index.html http://127.0.0.1:5000/index.html // 步骤一：创建异步对象 var ajax = new XMLHttpRequest(); // 步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url，可以带参数 ajax.open('get','http://127.0.0.1:8000?name=前端过来的刘德华'); // 步骤三：发送请求 ajax.send(); // 步骤四：注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function(){ if(ajax.redayState == 4 && ajax.status == 200){ // 步骤五：如果能够进入这个判断说明数据完美的回来了，并且请求的页面是存在的 console.log(ajax.responseText);//输入相应的内容 } } 复制代码最终，前端确实是跨域报错了。但这不是结果，我们要想知道是哪一个答案，关键在于看后端的node服务哪里有没有输出，就一目了然了。所以，答案2才是对的 前面提到了同源策略,满足协议号-域名-端口号这三者都相同就是同域，反之就是跨域,会导致跨域报错，下面通过几个例子让大家巩固一下对同域和跨域的认识吧! 跨域其实是一个很久的问题了，对应的解决方案也有很多，一起接着往下读吧!!! JSONP前面咱们说了，因为浏览器同源策略的存在，导致存在跨域问题，那有没有不受跨域问题所束缚的东西呢？其实是有的，以下这三个标签加载资源路径是不受束缚的 1、script标签： 2、link标签： 3、img标签：JSONP的缺点就是，需要前后端配合，并且只支持get请求方法 WebSocketWebSocket是什么东西？其实我也不怎么懂，但是我也不会像别人一样把MDN的资料直接复制过来，因为复制过来相信大家也是看不懂的。 我理解的WebSocket是一种协议(跟http同级，都是协议)，并且她可以进行跨域通信，为什么她支持跨域通信呢？ 我这里找到一篇文章WebSocket凭啥可以跨域？，讲的挺好 先安装 npm i ws // index.js http://127.0.0.1:8000 const Websocket = require('ws'); const port = 8000; const ws = new Websocket.Server({ port }) ws.on('connection',(obj) =>{ obj.on('message',(data) =>{ data = JSON.parse(data.toString()) const { name, age } = data obj.send(`${name}今年${age}岁了!!!`) }) }) 复制代码 前端代码 // index.html http://127.0.0.1:5500/index.html function myWebsocket(url,params){ return new Promise((resolve,reject)=>{ const socket = new WebSocket(url) socket.onopen = () => { socket.send(JSON.stringify(params)) } socket.onmessage = (e) => { resolve(e.data) } }) } myWebsocket('ws://127.0.0.1:8000',{ name:'刘德华', age:23 }).then(data=>){ console.log(data) // 刘德华今年23岁了!!! } 复制代码 CorsCors，全称Cross-Origin Resource Sharing,意思是跨域资源共享，Cors一般是由后端来开启的，一旦开启，前端就可以跨域访问后端。 为什么后端开启Cors，前端就能跨域请求后端呢？我的理解是：前端跨域访问到后端，后端开启Cors，发送Access-Control-Allow-Origin:域名字段到前端(其实不止一个)，前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样，浏览器就不会实行跨域拦截，从而解决跨域问题。 还是回到同源策略，同源策略它只是浏览器的一个策略而已，它是不限制后端的，也就是前端-后端会被同源策略限制，但是后端-后端则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端 创建一个index2.js，并nodmeon index2.js 后端1代码 // index2.js http://127.0.0.1:8888 const http = require('http'); const urllib = require('url'); const querystring = require('querystring'); const port = 8888; http.createServer(function (req, res) { // 开启Cors res.writeHead(200, { //设置允许跨域的域名，也可设置*允许所有域名 'Access-Control-Allow-Origin': 'http://127.0.0.1:5500', //跨域允许的请求方法，也可设置*允许所有方法 "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS", //允许的header类型 'Access-Control-Allow-Headers': 'Content-Type' }) const { query } = urllib.parse(req.url, true); const { methods = 'GET', headers } = req const proxyReq = http.request({ host: '127.0.0.1', port: '8000', path: `/?${querystring.stringify(query)}`, methods, headers }, proxyRes => { proxyRes.on('data', chunk => { console.log(chunk.toString()) res.end(chunk.toString()) }) }).end() }).listen(port, function () { console.log('server is listening on port ' + port); }) 复制代码 前端代码 // index.html http://127.0.0.1:5500 //步骤一:创建异步对象 var ajax = new XMLHttpRequest(); //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端 ajax.open('get', 'http://127.0.0.1:8888?name=刘德华&age=23'); //步骤三:发送请求 ajax.send(); //步骤四:注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 console.log(ajax.responseText);//输入相应的内容 } } 复制代码 Nginx其实Nginx跟Node接口代理是一个道理，只不过Nginx就不需要我们自己去搭建一个中间服务
最后通过命令行nginx -s reload启动nginx 后端代码 // index.js http://127.0.0.1:8000 const http = require('http'); const urllib = require('url'); const port = 8000; http.createState(function(req,res){ const { query:{ name, age } } = urllib.parse(req.url,true); res.end(`${name}今年${age}岁啦！！！`); }) 复制代码 前端代码 // index.html http://127.0.0.1:5500 //步骤一：创建异步对象 var ajax = XMLHttpRequest(); //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端 ajax.open('get', 'http://127.0.0.1:8888?name=刘德华&age=23'); //步骤三:发送请求 ajax.send(); //步骤四:注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 console.log(ajax.responseText);//输入相应的内容 } } 复制代码 postMessage场景：http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了http://127.0.0.1:5555/index.html的页面 虽然这两个页面存在于一个页面中，但是需要iframe标签来嵌套才行，这两个页面之间是无法进行通信的，因为他们端口号不同，根据同源策略，他们之间存在跨域问题 那应该怎么办呢？使用postMessage可以使这两个页面进行通信 场景：a.sanxin.com/index.html与b.sanxin.com/index.html之间的通信 其实上面这两个正常情况下是无法通信的，因为他们的域名不相同，属于跨域通信 那怎么办呢？其实他们有一个共同点，那就是他们的二级域名都是sanxin.com，这使得他们可以通过document.domain && iframe的方式来通信 由于没有服务器，所以暂时使用本地来模拟 // http://127.0.0.1:5500/index.html document.domain = '127.0.0.1' document.getElementById('frame').onload = function () { console.log(this.contentWindow.data) // 刘德华今年23岁啦！！！ } 复制代码 // http://127.0.0.1:5555/index.html // window.name="刘德华今年23岁啦！！！" document.domain = '127.0.0.1' var data = '刘德华今年23岁啦！！！'; 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |